---
title: Veröffentliche deine Astro-Website auf Heroku
description: Wie du deine Astro-Website auf Heroku im Internet veröffentlichst.
sidebar:
  label: Heroku
type: deploy
logo: heroku
supports: ['static']
i18nReady: true
---

import { Steps } from '@astrojs/starlight/components';

[Heroku](https://www.heroku.com/) ist eine Platform-as-a-Service für die Erstellung, den Betrieb und die Verwaltung moderner Apps in der Cloud. Mit dieser Anleitung kannst du eine Astro-Website auf Heroku veröffentlichen.

:::danger
Die folgenden Anweisungen nutzen [das veraltete `heroku-static-buildpack`](https://github.com/heroku/heroku-buildpack-static#warning-heroku-buildpack-static-is-deprecated).
Schau dir stattdessen die [Heroku-Dokumentation zur Verwendung von `heroku-buildpack-nginx`](https://github.com/dokku/heroku-buildpack-nginx) an.
:::

## So funktioniert die Veröffentlichung

<Steps>

1. Installiere die Kommandozeilen&shy;schnittstelle [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).

2. Erstelle ein Heroku-Konto, indem du dich [anmeldest](https://signup.heroku.com/).

3. Führe `heroku login` aus und gib deine Heroku-Anmeldedaten ein:

   ```bash
   $ heroku login
   ```

4. Erstelle im Stammverzeichnis deines Projekts eine Datei namens `static.json` mit dem folgenden Inhalt:

   ```json title="static.json"
   {
     "root": "./dist"
   }
   ```

   Dies ist die Konfiguration deiner Website; mehr dazu findest du unter [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static).

5. Richte deine Heroku Git remote ein:

   ```bash
   # Versionsnummer aktualisieren
   $ git init
   $ git add .
   $ git commit -m "Meine Website ist bereit für die Veröffentlichung."

   # Eine neue App mit einem bestimmten Namen erstellen
   $ heroku apps:create example

   # Buildpack für statische Websites einstellen
   $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
   ```

6. Veröffentliche deine Website:

   ```bash
   # Website veröffentlichen
   $ git push heroku master

   # Browser öffnen, um die Dashboard-Version von Heroku CI anzuzeigen
   $ heroku open
   ```

</Steps>
